<script  lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const props = defineProps({
  advertList: {
    type: Array
  }
});

const currentData = ref<any>({
  timer: null,
  topNum: 0
});

const initFn = () => {
  let iNow = 0;
  clearInterval(currentData.value.timer);
  currentData.value.timer = setInterval(() => {
    currentData.value.topNum = iNow%props.advertList.length;
    iNow += 1;
  }, 3000)
};

onMounted(() => {
  initFn()
});

</script>

<template>
  <section class="homeAdvertUtil">
    <div class="title-icon"></div>
    <div class="div-wrap">
      <ul class="ul-wrap" :style="{top: `-${currentData.topNum*18/100}rem`}">
        <li class="li-item" v-for="(item, index) in props.advertList" :key="index"><span class="red">HOT</span>{{item.advertName}}</li>
      </ul>
    </div>
    
    <div class="more">更多</div>
  </section>
</template>

<style lang="less" scoped>
.homeAdvertUtil {
  width: 3.75rem;
  height: .3rem;
  background: white;
  display: flex;
  align-items: center;
  padding: 0 .1rem;
  box-sizing: border-box;
  .title-icon {
    width: .73rem;
    height: .16rem;
    background: url("../../../assets/images/advert-icon-1.png") no-repeat center;
    background-size: contain;
  }
  .div-wrap {
    width: 2.48rem;
    height: .18rem;
    position: relative;
    overflow: hidden;
    .ul-wrap {
      position: absolute;
      top: 0rem;
      left: 0;
      transition: all .4s;
      .li-item {
        width: 2.48rem;
        height: .18rem;
        line-height: .18rem;
        font-size: .12rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .red {
          color: #f23030;
          padding: 0 .05rem;
        }
      }
    }
  }
  .more {
    width: .35rem;
    height: .16rem;
    line-height: .16rem;
    font-size: .14rem;
    color: #181818;
    border-left: .01rem solid #E5E5E5;
    text-align: right;
  }
}
</style>

